<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .dialog {
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0);
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
    }

    .contentDiv {
        border: 1px solid;
        width: 700px;
        height: 500px;
        background-color: white;
    }

</style>
<script src="/js/axios.min.js"></script>
<script src="/js/util.js"></script>
<script>
    window.onload = function () {
        findByItem(1);
    }

    function findByItem(pageNO) {
        axios.get("/email/findByItem", {
            params: {
                pageNO,
                head: $("headText").value,
                startDate: $("startDateText").value,
                endDate: $("endDateText").value
            }
        }).then(resp => {
            var info = resp.data;
            var str = "";
            info.records.forEach(n => {
                str += `<tr><td>${n.head}</td><td>${n.date}</td><td>
                    <input type="button" value="查看" onclick="findById(${n.emailId})">
                    <input type="button" value="删除" onclick="del(${n.emailId})">
                </td></tr>`;
            })
            $("emailData").innerHTML = str;
            var pageStr = "";
            for (let i = 1; i <= info.pages; i++) {
                pageStr += `<a style="margin-left: 10px" href="javascript:findByItem(${i})">${i}</a>`;
            }
            $("emailCut").innerHTML = pageStr;
        })
    }

    function findById(emailId) {

        $("dialog").style.visibility = "visible";
        axios.get("/email/findById", {
            params: {
                emailId,
            }
        }).then(resp => {
            var info = resp.data;
            console.log(info);
            $("headSpan").innerHTML = info.head;
            $("senderSpan").innerHTML = info.receivers;
            $("contentSpan").innerHTML = info.content;
            $("annexSpan").innerHTML = `<a href="/annex/${info.annex}">${info.annex}</a>`
        })

    }

    function del(emailId) {
        axios.get("/email/del", {
            params: {
                emailId,
            }
        }).then(resp => {
            if (resp.data == "ok") {
                findByItem(1);
            }
        })
    }


    function back() {
        $("dialog").style.visibility = "hidden";
        findByItem(1);
    }
</script>
<body>
发件箱
<table width="80%" border="1" cellspacing="1">
    <thead>
    <tr>
        <th>主题</th>
        <th>发送日期</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="emailData"></tbody>
</table>

<div id="emailCut"></div>
<div>
    <p>查询邮件</p>
    主题：<input type="text" id="headText"><br>
    起始日期：<input type="text" id="startDateText"><br>
    结束日期：<input type="text" id="endDateText"><br>
    <input type="button" value="查找" onclick="findByItem(1)">

</div>

<div class="dialog" id="dialog">
    <div class="contentDiv">
        主题：<span id="headSpan"></span><br>
        发件人：<span id="senderSpan"></span><br>
        邮件内容：<span id="contentSpan"></span><br>
        附件：<span id="annexSpan"></span><br>
        <input type="button" value="确定" onclick="back()">
    </div>
</div>
</body>

</html>